<template>
  <div class="multiple-card-container">
    <!-- start 按钮组 -->
    <div class="btn-wrap" v-if="showCreateBtn && !shareData.isArchive">
      <el-button
        @click="handleEvent({action: 'create'})"
        type="primary"
        size="mini"
        plain
      >{{$t('task.detail.components.addTaskHoursRecord')}}</el-button>
      <el-button
        v-if="isExport"
        @click="exportEvent"
        type="primary"
        size="mini"
        plain
      >{{$t('common.base.export')}}</el-button>
    </div>
    <div class="btn-group" v-if="!(showCreateBtn && !shareData.isArchive)">
      <el-button
        v-if="isExport"
        @click="exportEvent"
        type="primary"
        size="mini"
        plain
      >{{$t('common.base.export')}}</el-button>
    </div>
    <!-- end 按钮组 -->

    <!-- start 工时记录列表 -->
    <multiple-card-table
      :list-loading="listLoading"
      :data="hoursRecordData.workTimeRecordMainList"
      :is-hours-record="isHoursRecord"
      :columns="columns"
      :allow-create="allowCreate"
      :allow-edit="allowEdit"
      :allow-delete="allowDelete"
      :shareData='shareData'
      @action="handleEvent"
    />
    <!-- end 工时记录列表 -->

    <!-- start 合计 -->
    <div class="hours-record-total-panel" v-if="hoursRecordData.workTimeRecordMainList && hoursRecordData.workTimeRecordMainList.length">
      <div class="hours-record-total-item">
        {{$t('task.detail.components.totalTime')}}{{hoursRecordData.allUsedTime}}h，{{$t('task.detail.components.among')}}
        <span v-html="hoursRecordData.usedTimeDetail.join('，')">
        </span>
        ；
      </div>
      <div class="hours-record-total-item">
        {{$t('task.detail.components.totalTravel')}}{{hoursRecordData.allDestance}}km，{{$t('task.detail.components.among')}}
        <span v-html="hoursRecordData.usedDistanceDetail.join('，')">
        </span>
        ；
      </div>
    </div>
    <!-- end 合计 -->

    <!-- start 附加组件详情弹窗 -->
    <task-card-view-dialog
      ref="taskCardView"
      :fields="viewFields"
      :value.sync="cardInstance"
      :is-hours-record="isHoursRecord"
      @action="handleEvent"
    />
    <!-- end 附加组件详情弹窗 -->

    <!-- start 新增/编辑附加组件弹窗 -->
    <task-card-edit-dialog
      ref="taskCardEdit"
      :fields="formFields"
      :value.sync="cardInstance"
      :is-hours-record="isHoursRecord"
      :action="action"
      @submit="submit"
      v-on="$listeners"
      @setServerDeleFiles="setServerDeleFiles"
      @getDeleteFiles="getDeleteFiles"
    />
    <!-- end 新增/编辑附加组件弹窗 -->

    <!-- start 位置详情弹窗 -->
    <hours-record-location-dialog
      ref="hoursRecordLocation"
      :config="config"
    />
    <!-- end 位置详情弹窗 -->
  </div>
</template>

<script>
import { isOpenData } from '@src/util/platform'
import { getRootWindow } from '@src/util/dom'
/* api */
import * as TaskApi from '@src/api/TaskApi.ts';

/* components */
import MultipleCardTable from './../CardTable';
import HoursRecordLocation from './HoursRecordLocation';

/* mixin */
import cardMixin from './../CardMixin.js';

/* util */
import fieldUtil from './HoursRecordCardField.js';

export default {
  name: 'hours-record-card',
  mixins: [cardMixin],
  data() {
    return {
      isOpenData,
      hoursRecordData: {}
    }
  },
  computed: {
    /** 
    * @description 工时记录配置项
    */
    config() {
      return JSON.parse(this.card.config || '{}');
    },
    /** 
    * @description 工时记录列表项
    */
    columns() {
      let fields = fieldUtil.toTableFields(this.card.fields, this.config);
      return fields.filter(field => field.enabled == 1);
    },
    /** 
    * @description 新增、编辑工时记录表单字段
    */
    formFields() {
      let fields = fieldUtil.toFormFields(this.card.fields, this.config);
      return fields.filter(field => field.enabled == 1);
    },
    /** 
    * @description 工时记录详情字段
    * pc端和移动端生产的数据详情字段展示不同
    */
    viewFields() {
      let { fromType } = this.cardInstance?.attribute || {};
      if (fromType == 1) return this.formFields;

      let fields = fieldUtil.toMobileFields(this.card.fields, this.config);
      return fields.filter(field => field.enabled == 1);
    },
    /** 
    * @description 显示添加工时记录按钮
    * 1.满足新增权限
    * 2.工时记录设置禁用只允许在移动端填写
    */
    showCreateBtn() {
      return this.allowCreate && !this.config.isOnlyMobile;
    }
  },
  mounted() {
    this.getHoursRecordList();
  },
  methods: {
    openAddonsDialogAuto() {
      if(this.showCreateBtn && !this.shareData.isArchive) {
        this.handleEvent({action: 'create'})
      }
    },
    /** 
    * @description 获取工时记录列表数据
    */
    async getHoursRecordList() {
      try {
        let res = await TaskApi.getHoursRecordList({cardId: this.card.cardId, orderId: this.task.id});
        let data;
        let mainList;
        
        if (!res.success || !res.result){
          data = {};
          mainList = [];
        }else{
          data = res.result || {};
          mainList = data ? data.workTimeRecordMainList : [];
          // 处理附件
          for (let i = 0; i < mainList.length; i++) {
            mainList[i].attachment = JSON.parse(mainList[i].attachment || '[]');
            mainList[i].startAttachment = JSON.parse(mainList[i].startAttachment || '[]');
            mainList[i].endAttachment = JSON.parse(mainList[i].endAttachment || '[]');
          }

          // 处理合计用时
          data.usedTimeDetail = data.usedTimeDetail.map(item => {
            item = JSON.parse(item);
            return item = ` ${ this.isOpenData && item.staffId ? `<ww-open-data type="userName" openid="${item.staffId}"></ww-open-data>` : item.username} ` + `${item.usedTime}h`;
          })

          // 处理总行程
          data.usedDistanceDetail = data.usedDistanceDetail.map(item => {
            item = JSON.parse(item);
            return item = ` ${ this.isOpenData && item.staffId ? `<ww-open-data type="userName" openid="${item.staffId}"></ww-open-data>` : item.username} ` + `${item.distance}km`;
          })
        }

        this.hoursRecordData = data || {};
        this.$listeners.loadingOpen(false);
        this.$nextTick(()=>{
          const rootWindow = getRootWindow(window)
          if(rootWindow.WWOpenData) {
            rootWindow.WWOpenData.bindAll(document.querySelectorAll('ww-open-data'))
          }
        })
      } catch(err) {
        this.$listeners.loadingOpen(false);
        console.error('getHoursRecordList err', err)
      }
    }
  },
  components: {
    [MultipleCardTable.name]: MultipleCardTable,
    [HoursRecordLocation.name]: HoursRecordLocation
  }
}
</script>

<style lang="scss" scoped>
.hours-record-total-panel {
  font-size: 12px;
  color: $text-color-regular;
  padding: 6px 12px 0 0;

  .hours-record-total-item {
    margin-top: 6px;
  }
}
</style>